<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>智慧热力系统管理</title>
		<link rel="stylesheet" type="text/css" href="login/css/index.css"/>
		<style type="text/css">
			/*body{
               background: url(img/4.jpg) no-repeat;
            }*/

		</style>
	</head>
	<script src="jquery/jquery-3.5.1.js"></script>
	<body>
		<div class="bg">
			<div class="wel">智慧热力系统管理</div>
	        <div class="user">
	       	    <div style="">用户名</div>
	       	    <input  type="text" name="用户"  placeholder="输入用户名" id="yongHuMingCheng" />
	        </div>
	        <div class="password" >
	        	<div>密&nbsp;&nbsp;&nbsp;码</div>
	       	    <input class="" type="password" name="密码" id="miMa" />
	        </div>
	        <div class="rem" >
	       	  <input type="checkbox" name="" id="" value="" />
	        	 <div id="reb">
	        	 	记住密码
	        	 </div>
	        </div>
	        <div class="fg" >
	       	    <div style="font-size: 11px;margin-top: 11px;">
	       	    	<a style="font-size: 11px;" href="#">忘记密码？</a>
	       	    </div>
	        </div>
	        <input class="btn" type="button" id="loginButton" name="登录" value="登录" />
		</div>
	</body>

	<script>
		$(function () {
			$("#loginButton").click(function () {
				var yongHuMingCheng = $("#yongHuMingCheng").val();
				var miMa = $("#miMa").val();
				$.ajax({   // 异步请求   想象成线程状态
					url:"/user/login",   // 请求路径
					type:"post",               // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
					datatype:"text",
					contentType: "application/json;charset=utf-8",
					// request中传递的key-value值
					data:JSON.stringify({guaHaoYuanXingMing:yongHuMingCheng, guaHaoYuanMiMa:miMa}),
					success:function(response){                        // 后台服务响应成功，自动返回数据
						if(response.code === 200) {
							alert("登录成功!");
						}
						else {
							alert("登录失败，用户名或者密码错误!");
						}
					},
					error:function(response){             // 网络请求失败，自动调用此方法
						console.log("出错" + response);
					}
				});
			});
		});
	</script>
</html>
